<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ comMsg }}</h2>
    <div class="block" v-show="isShow">
      <p>活动名称: {{formData.name}}</p>
      <p>活动区域: {{formData.region}}</p>
      <p>即时配送: {{formData.delivery ? '是' : '否'}}</p>
      <p>日期: {{formData.date1}}</p>
      <p>时间: {{formData.date2}}</p>
      <p>活动资源: {{formData.resource}}</p>
      <p>活动形式: {{formData.desc}}</p>
    </div>
    <button @click="handleClick">点击测试</button>

    <child-a :width="width" @submit="submitChildA"></child-a>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import ChildA from './ChildA'
import { IChildAForm } from '@/types/interface'

@Component({
  components: {
    ChildA
  }
})
export default class HelloWorld extends Vue {
  msg: string = 'Hello'
  isShow: boolean = true
  width: string = '40%'
  formData: IChildAForm = {
      name: '-',
      region: '-',
      date1: '-',
      date2: '-',
      delivery: true,
      resource: '-',
      desc: '-'
  }
  public get comMsg () {
    return `computed-${this.msg}`
  }
  public created(): void {
    console.log('lifeDate: create')
  }
  public mounted(): void {
    console.log('lifeDate: mounted')
  }
  @Watch('formData',  {immediate: true, deep: true})
  onchangeValue(newVal: IChildAForm, oldVal: IChildAForm) {
    console.log('watch: formData update')
  }
  public handleClick (): void {
    this.isShow = !this.isShow
  }
  public submitChildA (formData: IChildAForm): void {
    this.formData = JSON.parse(JSON.stringify(formData))
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
button {
  margin-top: 20px;
}
p {
  color: #FFFFFF;
  font-size: 12px;
}
.block {
  width: 200px;
  height: 200px;
  background-color: #42b983;
  margin: 0 auto;
}
</style>
